<template>
  <div class="finance-list">
    <div class="page-header">
      <div class="header-title">
        <h2>批款通知</h2>
        <span class="subtitle">管理所有的批款通知</span>
      </div>
      <div class="header-actions">
        <el-button type="primary" icon="el-icon-plus" @click="handleAddAllocation">添加批款通知</el-button>
      </div>
    </div>
    <!-- 过滤卡片 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="批款标题">
          <el-input v-model="filterForm.title" placeholder="请输入批款标题" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filterForm.stat" placeholder="请选择状态" clearable>
            <el-option label="已批款" :value="1"></el-option>
            <el-option label="已结项" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
      <!-- 数据卡片 -->
    <el-card class="table-card">
      <el-table
        :data="allocationList"
        style="width: 100%"
        border
        v-loading="loading"
        @selection-change="handleSelectionChange">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="title" label="批款标题">
          <template slot-scope="scope">
            <el-link type="primary" @click="viewAllocationDetail(scope.row)">{{ scope.row.title }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="批款金额" width="120">
          <template slot-scope="scope">
            ¥ {{ formatAmount(scope.row.amount) }}
          </template>
        </el-table-column>
        <el-table-column prop="tags" label="资金类型">
          <template slot-scope="scope">
            <el-tag>
              {{ formatFundType(scope.row.tags) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="stat" label="状态" width="100">
          <template slot-scope="scope">
             <el-tag :type="scope.row.stat === 1 ? 'success' : 'info'">
              {{ scope.row.stat === 1 ? '已批款' : '已结项' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewAllocationDetail(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="editAllocation(scope.row)">编辑</el-button>
            <el-button 
              type="text" 
              size="small" 
              :class="{ 'danger-button': scope.row.stat === 1 }"
              @click="toggleAllocationStatus(scope.row)">
              {{ scope.row.stat === 1 ? '结项' : (scope.row.stat === 2 ? '变更为已上传发票' : '恢复为申请中') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 批款通知详情对话框 -->
    <el-dialog title="批款通知详情" :visible.sync="allocationDetailVisible" width="70%">
      <div v-if="currentAllocation" class="allocation-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="批款ID">{{ currentAllocation.id }}</el-descriptions-item>
          <el-descriptions-item label="社团ID">{{ currentAllocation.clubId }}</el-descriptions-item>
          <el-descriptions-item label="批款标题">{{ currentAllocation.title }}</el-descriptions-item>
          <el-descriptions-item label="批款金额">¥ {{ formatAmount(currentAllocation.amount) }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatDateTime(currentAllocation.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="资金类型">
            <el-tag :type="getFundTypeStyle(currentAllocation.tags)">
              {{ formatFundType(currentAllocation.tags) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="currentAllocation.stat === 1 ? 'success' : 'info'">
              {{ currentAllocation.stat === 1 ? '已批款' : '已结项' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="批款说明" :span="2">{{ currentAllocation.description }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="detail-section" v-if="currentAllocation.list && currentAllocation.list.length > 0">
          <h3>相关申请记录</h3>
          <el-table :data="currentAllocation.list" style="width: 100%">
            <el-table-column prop="id" label="申请ID" width="80"></el-table-column>
            <el-table-column prop="title" label="申请标题"></el-table-column>
            <el-table-column prop="amount" label="申请金额" >
              <template slot-scope="scope">
                ¥ {{ formatAmount(scope.row.amount) }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="申请时间" >
              <template slot-scope="scope">
                {{ formatDateTime(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" >
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.stat)">
                  {{ getStatusText(scope.row.stat) }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template v-if="scope.row.stat !== 2"  slot-scope="scope">
                <el-button type="success" size="small" @click="updateRequestStatus(scope.row, 2)">通过</el-button>
                <el-button type="danger" size="small" @click="updateRequestStatus(scope.row, 0)">拒绝</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-else class="empty-data">
          <i class="el-icon-document"></i>
          <p>暂无相关申请记录</p>
        </div>
      </div>
    </el-dialog>

    <!-- 编辑批款通知对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="editDialogVisible" width="50%">
      <el-form :model="allocationForm" :rules="allocationRules" ref="allocationForm" label-width="100px">
        <el-form-item label="批款标题" prop="title">
          <el-input v-model="allocationForm.title"></el-input>
        </el-form-item>
        <el-form-item label="批款说明" prop="description">
          <el-input type="textarea" v-model="allocationForm.description" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="批款金额" prop="amount">
          <el-input-number v-model="allocationForm.amount" :min="0" :step="100" :precision="2" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="资金类型" prop="tags">
          <el-select v-model="allocationForm.tags" placeholder="请选择资金类型" style="width: 100%">
            <el-option v-for="(item, index) in fundTypes" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="社团" prop="clubId">
          <el-input v-model.number="allocationForm.clubId" readonly @focus="openClubSelector">
            <template v-if="selectedClubName" slot="append">{{ selectedClubName }}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="状态" prop="stat">
          <el-radio-group v-model="allocationForm.stat">
            <el-radio :label="1">已批款</el-radio>
            <el-radio :label="0">已结项</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAllocationForm" :loading="submitting">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 社团选择对话框 -->
    <el-dialog title="选择社团" :visible.sync="clubSelectorVisible" width="70%">
      <el-input
        placeholder="搜索社团名称"
        v-model="clubSearchKeyword"
        clearable
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px;"
        @input="filterClubs">
      </el-input>
      
      <el-table
        :data="filteredClubList"
        style="width: 100%"
        border
        height="400px"
        v-loading="clubsLoading"
        @row-click="selectClub">
        <el-table-column prop="id" label="社团ID" width="80"></el-table-column>
        <el-table-column prop="title" label="社团名称"></el-table-column>
        <el-table-column prop="tags" label="社团类型" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.tags">
              <el-tag v-for="(tag, index) in scope.row.tags.split(',')" :key="index" size="small" style="margin-right: 5px; margin-bottom: 5px;">
                {{ tag }}
              </el-tag>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template slot-scope="scope">
            {{ formatDateTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="stat" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.stat === 1 ? 'success' : 'info'">
              {{ scope.row.stat === 1 ? '正常' : '已注销' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="clubSelectorVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import httpInstance from "@/utils/http";

export default {
  name: 'FinanceManagement',
  data() {
    return {
      fundTypes: [],
      loading: false,
      submitting: false, // 添加提交状态控制
      filterForm: {
        title: '',
        description: '',
        tags: '',
        stat: ''
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      allocationList: [],
      selectedAllocations: [],
      allocationDetailVisible: false,
      currentAllocation: null,
      editDialogVisible: false,
      dialogTitle: '添加批款通知',
      allocationForm: {
        id: null,
        title: '',
        description: '',
        clubId: '',
        amount: 0,
        tags: '',
        stat: 1,
      },
      allocationRules: {
        title: [
          { required: true, message: '请输入批款标题', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入批款说明', trigger: 'blur' }
        ],
        clubId: [
          { required: true, message: '请选择社团', trigger: 'change' },
          { type: 'number', message: '社团ID必须为数字', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入批款金额', trigger: 'blur' },
          { type: 'number', min: 0, message: '批款金额必须大于等于0', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请选择资金类型', trigger: 'change' }
        ],
        stat: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },
      allAllocations: [],
      // 社团选择器相关数据
      clubSelectorVisible: false,
      clubList: [],
      filteredClubList: [],
      clubSearchKeyword: '',
      clubsLoading: false,
      selectedClubName: '' // 新增：存储选中的社团名称
    }
  },
  created() {
    // 获取资金类型
    this.loadFundTypes();
    // 检查token是否存在
    const token = localStorage.getItem('token')
    if (!token) {
      this.$router.push('/admin/login')
    }
    
    this.fetchAllocationList();
  },
  methods: {
    // 加载资金类型
    async loadFundTypes() {
      const res = await httpInstance.post('/api/sys/fundTypes')
      if (res.code == 200) {
        this.fundTypes = res.data;
      }
    },

    // 审批 批款申请
    async updateRequestStatus(request, newStatus) {
      try {
        const res = await httpInstance.post(`/api/finance/update_allocation_request/${request.id}/${newStatus}`);
        if(res.code === 200){
          this.$message.success('操作成功');
          // 刷新数据
          request.stat = newStatus;
          this.fetchAllocationList()
        } else {
          this.$message.error(res.message || '操作失败');
        }
      } catch (error) {
        console.error('更新状态失败:', error);
        this.$message.error('操作失败，请稍后重试');
      }
    },

  // 获取申请状态对应的类型
    // 获取申请状态对应的类型
    getStatusType(status) {
      const statusMap = {
        0:'danger',
        1: 'warning',   // 申请中
        2: 'primary',   // 已打款
        3: 'success'    // 已上传发票
      };
      return statusMap[status] || 'info';
    },
    
     // 获取申请状态对应的文本
    getStatusText(status) {
      const statusMap = {
        0: '已拒绝',
        1: '申请中',
        2: '已打款',
        3: '已上传发票'
      };
      return statusMap[status] || '未知状态';
    },
    // 获取批款通知列表
    async fetchAllocationList() {
      this.loading = true;
      try {
        // 实际API调用
        const response = await httpInstance.post('/api/finance/list_notice');
        console.log("获取批款通知数据", response);
        if (response && response.code === 200) {
          // 保存所有数据
          this.allAllocations = response.data || [];
          
          // 设置总条数
          this.pagination.total = this.allAllocations.length;
          
          // 执行前端分页
          this.handleFrontendPagination();
        } else {
          this.$message.error(response?.message || '获取批款通知列表失败');
        }
      } catch (error) {
        console.error('获取批款通知列表失败:', error);
        this.$message.error('获取批款通知列表失败，请稍后重试');
      } finally {
        this.loading = false;
      }
    },
    
    // 打开社团选择器
    async openClubSelector() {
      this.clubSelectorVisible = true;
      this.clubSearchKeyword = '';
      await this.fetchClubList();
    },
    
    // 获取社团列表
    async fetchClubList() {
      this.clubsLoading = true;
      try {
        const response = await httpInstance.get('/api/club/list');
        if (response && response.code === 200) {
          this.clubList = response.data || [];
          this.filteredClubList = [...this.clubList];
        } else {
          this.$message.error(response?.message || '获取社团列表失败');
        }
      } catch (error) {
        console.error('获取社团列表失败:', error);
        this.$message.error('获取社团列表失败，请稍后重试');
      } finally {
        this.clubsLoading = false;
      }
    },
    
    // 筛选社团
    filterClubs() {
      if (!this.clubSearchKeyword) {
        this.filteredClubList = [...this.clubList];
        return;
      }
      
      this.filteredClubList = this.clubList.filter(club => 
        club.title && club.title.toLowerCase().includes(this.clubSearchKeyword.toLowerCase())
      );
    },
    
    // 选择社团
    selectClub(row) {
      this.allocationForm.clubId = row.id;
      this.selectedClubName = row.title; // 保存社团名称
      this.clubSelectorVisible = false;
    },
    
    // 提交批款通知表单
    submitAllocationForm() {
      this.$refs.allocationForm.validate(async (valid) => {
        if (!valid) {
          this.$message.warning('请完善表单信息');
          return;
        }
        
        try {
          // 准备提交的数据
          const formData = {
            ...this.allocationForm,
            // 确保金额是整数（单位：分）
            amount: Math.round(this.allocationForm.amount * 100)
          };
          
          // 根据是否有ID判断是新增还是编辑
          const isEdit = !!formData.id;
          const url = isEdit ? '/api/finance/update_notice' : '/api/finance/create_notice';
          
          // 显示加载状态
          this.submitting = true;
          
          // 发送请求
          const response = await httpInstance.post(url, formData);
          
          if (response && response.code === 200) {
            this.$message.success(isEdit ? '批款通知更新成功' : '批款通知创建成功');
            this.editDialogVisible = false;
            // 刷新列表
            this.fetchAllocationList();
          } else {
            this.$message.error(response?.message || (isEdit ? '更新失败' : '创建失败'));
          }
        } catch (error) {
          console.error('提交批款通知失败:', error);
          this.$message.error('操作失败，请稍后重试');
        } finally {
          this.submitting = false;
        }
      });
    },
    
    // 编辑批款通知
    editAllocation(allocation) {
      this.dialogTitle = '编辑批款通知';
      this.allocationForm = { 
        ...allocation,
        // 确保金额显示为元（后端存储为分）
        amount: allocation.amount ? allocation.amount / 100 : 0
      };
      
      // 获取社团名称
      this.fetchClubName(allocation.clubId);
      
      this.editDialogVisible = true;
    },
    
    // 获取社团名称
    async fetchClubName(clubId) {
      if (!clubId) {
        this.selectedClubName = '';
        return;
      }
      
      try {
        // 如果已经加载了社团列表，从列表中查找
        if (this.clubList.length > 0) {
          const club = this.clubList.find(c => c.id === clubId);
          if (club) {
            this.selectedClubName = club.title;
            return;
          }
        }
        
        // 否则从服务器获取
        const response = await httpInstance.get(`/api/club/detail?id=${clubId}`);
        if (response && response.code === 200 && response.data) {
          this.selectedClubName = response.data.title;
        } else {
          this.selectedClubName = '';
        }
      } catch (error) {
        console.error('获取社团名称失败:', error);
        this.selectedClubName = '';
      }
    },
    
    // 添加批款通知
    handleAddAllocation() {
      this.dialogTitle = '添加批款通知';
      this.allocationForm = {
        id: null,
        title: '',
        description: '',
        clubId: '',
        amount: 0,
        tags: '',
        stat: 1
      };
      this.selectedClubName = ''; // 清空选中的社团名称
      this.editDialogVisible = true;
    },
    
    // 前端分页方法
    handleFrontendPagination() {
      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize;
      const end = start + this.pagination.pageSize;
      // 从所有数据中截取当前页需要显示的数据
      this.allocationList = this.allAllocations.slice(start, end);
    },
    
    // 查询
    handleSearch() {
      // 先通过本地过滤筛选数据
      let filteredList = [...this.allAllocations];
      
      if (this.filterForm.title) {
        filteredList = filteredList.filter(item => 
          item.title && item.title.includes(this.filterForm.title)
        );
      }
      
      if (this.filterForm.description) {
        filteredList = filteredList.filter(item => 
          item.description && item.description.includes(this.filterForm.description)
        );
      }
      
      if (this.filterForm.tags) {
        filteredList = filteredList.filter(item => 
          item.tags && item.tags === this.filterForm.tags
        );
      }
      
      if (this.filterForm.stat !== '') {
        filteredList = filteredList.filter(item => 
          item.stat === this.filterForm.stat
        );
      }
      
      // 更新过滤后的数据
      this.allAllocations = filteredList;
      this.pagination.total = filteredList.length;
      this.pagination.currentPage = 1;
      this.handleFrontendPagination();
    },
    
    // 重置表单
    resetForm() {
      this.filterForm = {
        title: '',
        description: '',
        tags: '',
        stat: ''
      };
      this.fetchAllocationList();
    },
    
    // 刷新
    handleRefresh() {
      this.fetchAllocationList();
    },
    
    // 导出数据
    handleBatchExport() {
      this.$message.success('导出成功，文件已下载');
    },
    
    // 表格选择项变化
    handleSelectionChange(selection) {
      this.selectedAllocations = selection;
    },
    
    // 查看批款通知详情
    async viewAllocationDetail(allocation) {
      try {
        // 直接使用当前行的数据，不再发送额外请求
        this.currentAllocation = allocation;
        this.allocationDetailVisible = true;
      } catch (error) {
        console.error('查看批款通知详情失败:', error);
        this.$message.error('查看批款通知详情失败，请稍后重试');
      }
    },
    
    
    
    // 查看批款请求详情
    async viewRequestDetail(request) {
      try {
        const response = await httpInstance.get(`/api/finance/request/detail?id=${request.id}`);
        if (response && response.code === 200) {
          this.currentRequest = response.data;
          this.requestDetailVisible = true;
        } else {
          this.$message.error(response?.message || '获取批款请求详情失败');
        }
      } catch (error) {
        console.error('获取批款请求详情失败:', error);
        this.$message.error('获取批款请求详情失败，请稍后重试');
      }
    },
    
    // 下载附件
    downloadAttachment(attachment) {
      window.open(attachment.url, '_blank');
    },
    
    // 格式化文件大小
    formatFileSize(size) {
      if (!size) return '0 B';
      
      const units = ['B', 'KB', 'MB', 'GB', 'TB'];
      let index = 0;
      let fileSize = size;
      
      while (fileSize >= 1024 && index < units.length - 1) {
        fileSize /= 1024;
        index++;
      }
      
      return `${fileSize.toFixed(2)} ${units[index]}`;
    },
    
    // 获取请求状态类型
    getRequestStatusType(stat) {
      const typeMap = {
        0: 'info',    // 待审核
        1: 'success', // 已通过
        2: 'danger',  // 已拒绝
        3: 'warning'  // 已撤回
      };
      return typeMap[stat] || 'info';
    },
    
    // 获取请求状态文本
    getRequestStatusText(stat) {
      const textMap = {
        0: '待审核',
        1: '已通过',
        2: '已拒绝',
        3: '已撤回'
      };
      return textMap[stat] || '未知状态';
    },
    
    // 切换批款通知状态
    async toggleAllocationStatus(row) {
      try {
        // 确定下一个状态
        let nextStatus;
        if (row.stat === 1) {
          nextStatus = 2; // 申请中 -> 已打款
        } else if (row.stat === 2) {
          nextStatus = 3; // 已打款 -> 已上传发票
        } else {
          nextStatus = 1; // 其他状态 -> 申请中
        }
        
        const res = await this.$http.post('/api/finance/allocation/toggle-status', {
          id: row.id,
          stat: nextStatus
        });
        
        if (res.code === 200) {
          this.$message.success('状态更新成功');
          // 更新本地数据
          row.stat = nextStatus;
        } else {
          this.$message.error(res.message || '操作失败');
        }
      } catch (error) {
        console.error('切换状态失败:', error);
        this.$message.error('操作失败，请稍后重试');
      }
    },
    
    // 分页大小变化
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.handleFrontendPagination();
    },
    
    // 当前页变化
    handleCurrentChange(page) {
      this.pagination.currentPage = page;
      this.handleFrontendPagination();
    },
    
    // 格式化金额
    formatAmount(amount) {
      if (amount === null || amount === undefined) return '0.00';
      return (amount / 100).toFixed(2);
    },
    
    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return '未设置';
      
      try {
        const date = new Date(dateTime);
        if (isNaN(date.getTime())) return dateTime; // 如果解析失败，返回原始值
        
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      } catch (error) {
        console.error('日期格式化错误:', error);
        return dateTime; // 出错时返回原始值
      }
    },
    
    // 格式化资金类型
    formatFundType(tags) {
      if (!tags || !this.fundTypes || this.fundTypes.length === 0) {
        return tags || '未知类型';
      }
      
      const foundType = this.fundTypes.find(type => type.value === tags);
      return foundType ? foundType.name : tags;
    },
    
    // 获取资金类型样式
    getFundTypeStyle(type) {
      const styleMap = {
        'restricted': 'warning',
        'unrestricted': 'success',
        'special': 'primary',
        'reward': 'info',
        'activity': 'danger'
      };
      return styleMap[type] || '';
    },
    
    // 获取申请状态对应的类型
    getStatusType(status) {
      const statusMap = {
        0:'danger',
        1: 'warning',   // 申请中
        2: 'primary',   // 已打款
        3: 'success'    // 已上传发票
      };
      return statusMap[status] || 'info';
    },
    
    // 获取申请状态对应的文本
    getStatusText(status) {
      const statusMap = {
        0:'已拒绝',
        1: '申请中',
        2: '已打款',
        3: '已上传发票'
      };
      return statusMap[status] || '未知状态';
    },
  }
}
</script>

<style scoped>
.finance-list {
  padding-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  flex-direction: column;
}

.header-title h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.filter-card {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.table-operations {
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.danger-button {
  color: #F56C6C;
}

.detail-section {
  margin-top: 30px;
}

.detail-section h3 {
  font-size: 16px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  color: #303133;
}

.empty-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #909399;
}

.empty-data i {
  font-size: 40px;
  margin-bottom: 10px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

/* 确保对话框内容可滚动 */
.el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}
</style>
